<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教练管理列表</title>
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <link href="../../static/css/style.css" rel="stylesheet">
    <script src="../../static/js/jquery.min.js"></script>
    <script src="../../static/js/jquery.cookie.js"></script>
    <script src="../../static/js/base.js"></script>
    <script src="../../static/js/ax.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="../../static/js/html5.js"></script>
    <script src="../../static/js/respond.js"></script>
    <![endif]-->

</head>
<body>
<!--主体内容-->
<div class="layui-fluid content">
    <div class="layui-card content-wrap">
        <form class="layui-form layui-form-pane" action="">
            <div class="layui-row  layui-col-space15">
                <div class="layui-col-sm4">
                    <label class="layui-form-label">教练列表</label>
                    <div class="layui-input-block">
                        <input type="text" id="name" placeholder="请输入教练姓名和证件号码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <label class="layui-form-label">培训车型</label>
                    <div class="layui-input-block">
                        <select id="trainCartype">
                            <option value="C1">C1</option>
                            <option value="C2">C2</option>
                            <option value="C9">C9</option>
                            <option value="A1">A1</option>
                            <option value="A2">A2</option>
                            <option value="A3">B1</option>
                            <option value="B1">B1</option>
                            <option value="B2">B2</option>
                        </select>
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <label class="layui-form-label">时间类型</label>
                    <div class="layui-input-block">
                        <select id="timeType">
                            <option value="1">创建时间</option>
                            <option value="2">修改时间</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="layui-row layui-col-space15 layui-form-item">
                <div class="layui-col-sm4">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" id="stime" placeholder="yyyy-MM-dd HH:mm:ss">
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" id="etime" placeholder="yyyy-MM-dd HH:mm:ss">
                    </div>
                </div>
                <div class="layui-col-sm4">
                    <a class="layui-btn add_btn" onclick="searchData()">
                        <i class="layui-icon layui-icon-search"></i>搜索
                    </a>
                    <a class="layui-btn delete_btn" onclick="clearSearchData()">
                        <i class="layui-icon layui-icon-delete"></i>清空
                    </a>

                    <a class="layui-btn add_btn" onclick="toAdd()">
                        <i class="layui-icon layui-icon-add-circle"></i>增加
                    </a>
                </div>
            </div>
        </form>
        <table class="layui-hide" id="axTable" lay-filter="filterTable"></table>
    </div>
</div>
<!--主体内容-->

</body>


<script type="text/html" id="barTable">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="toEdit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="toDel">删除</a>
</script>

<script src="../../layui/layui.all.js"></script>
<script type="text/javascript">

    ax.dateInit("#stime");
    ax.dateInit("#etime");

    var axTable = ax.VTable({
        elem: '#axTable',
        url: schoolWebUrl + '/api/coach/list',
        where: getWhere(),
        cols: [[
            {type: 'checkbox', fixed: 'left'}
            , {field: 'coachNumber', width: 160, title: '教练编号'}
            , {field: 'name', width: 160, title: '姓名'}
            , {field: 'sex', width: 160, title: '性别'}
            , {field: 'idnum', width: 160, title: '证件号码'}
            , {field: 'phone', width: 160, title: '手机号码'}
            , {field: 'trainCartype', width: 160, title: '准驾车型'}
            , {field: 'subject', width: 160, title: '培训科目', templet: '#stateTpl'}
            , {field: 'coachHead', width: 160, title: '教练头像', templet: '#stateTpl'}
            , {field: 'wechat', width: 160, title: '微信号', templet: '#stateTpl'}
            , {field: 'updated', width: 160, title: '修改时间'}
            , {field: 'created', width: 160, title: '创建时间'}
            , {field: 'created', width: 120, title: '操作', templet: '#barTable'}
        ]],

    });


    layui.table.on('tool(filterTable)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            , layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent === 'toEdit') {
            alert("弹出修改");
        } else if (layEvent === 'toDel') {
            alert("弹出删除");
        }
    });

    function getWhere() {
        return {
            name: $("#name").val()
            , trainCartype: $("#trainCartype").val()
            , timeType: $("#timeType").val()
            , startTime: $("#stime").val()
            , endTime: $("#etime").val()
        };
    }

    function searchData(e) {
        layui.table.reload('axTable', {
            where: getWhere(),
            page: {
                curr: 1
            }
        });
    }


</script>
</html>